<template>
	<view>
		<!-- 轮播 -->
		<view class="swiperContainer">
			<view class="swiperContainer">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="swiper-item">
						<image mode="aspectFill" src="https://yanxuan.nosdn.127.net/bfb2d2897fae876df46fe1339496ef48.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image mode="aspectFill" src="https://yanxuan.nosdn.127.net/10518c38e59180832e2b322baf8dd919.gif?imageView&quality=75&type=jpg"></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image mode="aspectFill" src="https://yanxuan.nosdn.127.net/1160a1f0686bef39899e7707e7d1fd9a.jpg?quality=75&type=webp&imageView"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- policyDescList -->
		<view class="policy">
			<view class="policyItem" v-for="(item, index) in indexData.policyDescList" :key="index">
				<image :src="item.icon"></image>
				<text>{{ item.desc }}</text>
			</view>
		</view>
		<!-- 九宫格 -->
		<view class="kingKong" v-if="indexData.kingKongModule">
			<view class="kingKongItem" v-for="(item, index) in indexData.kingKongModule.kingKongList" :key="item.l1Id">
				<image :src="item.picUrl"></image>
				<text>{{ item.text }}</text>
			</view>
		</view>
		<!-- 产品列表  -->
		<view class="category" v-for="(categoryItem,index) in indexData.categoryModule" :key="index">
			<image class="titlePic" :src="categoryItem.titlePicUrl"></image>
			<scroll-view scroll-x enable-flex class="categoryScroll">
				<view class="categoryItem" v-for="(item,index) in categoryItem.itemList" :key="item.id">
					<image :src="item.showPicUrl"></image>
					<view class="text">
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState('indexModule', ['indexData'])
	}
};
</script>

<style lang="stylus">
	// 轮播
	.swiperContainer
		width 100%
		margin-top 5rpx
		.swiper-item
			width 100%
			height 100%
			image
				width 100%
				height 100%
// policy
	.policy
		display flex
		flex-wrap nowrap
		padding 10rpx 20rpx
		justify-content space-between
		.policyItem
			text
				vertical-align middle
				font-size 24rpx
			image
				vertical-align middle
				width 32rpx
				height 32rpx
				margin-right 5rpx
// 九宫格
	.kingKong
		display flex
		width 100%
		flex-wrap wrap
		padding 20rpx
		.kingKongItem
			width 20%
			display flex
			flex-direction column
			image
				width 110rpx
				height 110rpx
			text
				margin-top 20rpx
				font-size 24rpx
	//产品列表
	.category
		width 100%
		// margin 10rpx 0
		.titlePic
			width 100%
			height 370rpx
		.categoryScroll
			display flex
			height 290rpx
			.categoryItem
				display inline-block
				width 200rpx
				margin 0 10rpx 
				vertical-align top
				image
					width 200rpx
					height 200rpx
					background #ededed
				.text
					display:-webkit-box
					overflow hidden
					-webkit-box-orient vertical
					-webkit-line-clamp 2
					text-overflow ellipsis
					font-size 24rpx
					
</style>
